<template>
  <div class="tableHeaderShow">
    <el-popover placement="left" trigger="click">
      <template>
        <div>
          <el-checkbox v-model="allSelect" @change="selectAll">全选</el-checkbox>
        </div>
        <div v-for=" (item, index) in myHeaderList" :key="index">
          <el-checkbox v-model="item.isSelect">{{item.label}}</el-checkbox>
        </div>
      </template>
      <el-button class="tag" slot="reference" icon="el-icon-arrow-down">显示字段</el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myHeaderList: this.headerList,
      allSelect: true
    };
  },
  props: {
    headerList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    
  },
  watch: {
    headerList: {
      handler: function(val) {
        this.myDownLoadList = val;
      }
    },
    myHeaderList: {
      handler: function(val) {
        let flag = val.every(item => item.isSelect);
        if (flag) {
          this.allSelect = true;
        } else {
          this.allSelect = false;
        }
      },
      deep: true
    }
  },
  methods: {
    selectAll(val) {
      for (let i = 0; i < this.myHeaderList.length; i++) {
        this.$set(this.myHeaderList[i], "isSelect", val);
      }
      this.$emit("update:headerList", this.myHeaderList);
      
    
    }
  }
};
</script>

<style scoped lang='less'>
.tableHeaderShow {
  /deep/.el-popover {
  }
  .tag {
    border: 1px solid rgba(36, 157, 255, 1);
    border-radius: 12px;
    padding: 5px 16px;
    color: #31a3ff;
    font-size: 15px;
    margin: 0 20px 10px 0;
  }
  .tag:hover {
    background: rgba(36, 157, 255, 1);
    color: #fff;
  }
  .tag:focus {
    background: rgba(36, 157, 255, 1);
    color: #fff;
  }
}
</style>